<script setup lang="ts">
import { reqGetUserInfo, reqUpdateUser } from "@/api/user";
import { ref } from "vue";
import dayjs from "dayjs";
import { Toast } from "vant";
import useStore from "@/store";
const userInfo = ref({
    birthday: "",
    gender: 0,
    id: "",
    mobile: "",
    photo: "",
    name: "",
    intro: "",
});

//!============================================================================================================================
async function getUserInfo() {
    const res = await reqGetUserInfo();
    console.log(res.data.data);
    userInfo.value = res.data.data;
}
getUserInfo();
//!============================================================================================================================
const show = ref<boolean>(false);
const active = ref<0 | 1 | 2 | 3>(0);
const name = ref("");
const gender = ref(0);
const intro = ref("");
const birthday = ref<Date>();
const showPopup = (num: 0 | 1 | 2 | 3) => {
    console.log(typeof userInfo.value.gender);
    //! 不能直接绑原来的值，不然没点确定就已经更改了
    name.value = userInfo.value.name;
    gender.value = userInfo.value.gender;
    intro.value = userInfo.value.intro;
    birthday.value = dayjs(userInfo.value.birthday).toDate();
    show.value = true;
    active.value = num;
    console.log("editName");
};
//!============================================================================================================================
const minDate = new Date(1995, 1, 1);
const maxDate = new Date();
async function onConfirm(value: Date) {
    show.value = false;
    const birthday = dayjs(value).format("YYYY-MM-DD");
    console.log(birthday);
    // 更新生日
    await reqUpdateUser({ birthday });
    userInfo.value.birthday = birthday;
}
//*=============================================================================================================
async function submitUpdate() {
    const { user } = useStore();
    if (active.value === 0) {
        if (name.value.trim() === "") return Toast.fail("姓名不能为空");
        await reqUpdateUser({ name: name.value });
        userInfo.value.name = name.value;
    } else if (active.value === 1) {
        await reqUpdateUser({ gender: gender.value });
        userInfo.value.gender = gender.value;
    } else if (active.value === 2) {
        await reqUpdateUser({ intro: intro.value });
        userInfo.value.intro = intro.value;
    }
    user.resetUserInfo();
    Toast.success("操作成功");
    show.value = false;
}
</script>
<template>
    <!-- 导航栏 -->
    <van-nav-bar
        title="编辑资料"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
        style="background-color: #07c160"
    />
    <van-cell
        @click="showPopup(0)"
        title="姓名"
        is-link
        :value="userInfo.name"
    />
    <van-cell
        @click="showPopup(1)"
        title="性别"
        is-link
        :value="userInfo.gender === 0 ? '男' : '女'"
    />
    <van-cell
        @click="showPopup(2)"
        title="个性签名"
        is-link
        :value="userInfo.intro || '暂无签名'"
    />
    <van-cell
        @click="showPopup(3)"
        title="生日"
        is-link
        :value="userInfo.birthday"
    />
    <!-- -------------------------------------------------------------------------------------------------- -->
    <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
        <van-row
            style="text-align: center"
            align="center"
            justify="space-between"
            v-if="active !== 3"
        >
            <van-col :span="4"
                ><van-button
                    @click="show = false"
                    style="border: none"
                    plain
                    type="success"
                    >取消</van-button
                ></van-col
            >
            <van-col :span="4"
                ><van-button
                    @click="submitUpdate"
                    style="border: none"
                    plain
                    type="success"
                    >确定</van-button
                ></van-col
            >
        </van-row>
        <van-row v-if="active === 0">
            <van-field
                v-model="name"
                error
                colon
                clearable
                required
                label="姓名"
                placeholder="请输入新用户名"
                input-align="right"
            />
        </van-row>
        <van-row v-if="active === 1">
            <van-radio-group style="width: 100%" v-model="gender">
                <van-cell-group inset>
                    <van-cell title="男" clickable @click="gender = 0">
                        <template #right-icon>
                            <van-radio :name="0" />
                        </template>
                    </van-cell>
                    <van-cell title="女" clickable @click="gender = 1">
                        <template #right-icon>
                            <van-radio :name="1" />
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
        </van-row>
        <van-row v-if="active === 2">
            <van-cell-group style="width: 100%" inset>
                <van-field
                    v-model="intro"
                    rows="2"
                    autosize
                    type="textarea"
                    maxlength="50"
                    placeholder="请输入签名"
                    show-word-limit
                />
            </van-cell-group>
        </van-row>
        <van-row v-if="active === 3">
            <van-calendar
                v-model:show="show"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onConfirm"
                color="#07c160"
                :default-date="birthday"
            />
        </van-row>
    </van-popup>
</template>
